
/*总容器*/
.wrapper{
    width: 100%;
    height: 100%;

}

/*头部*/
.wrapper .header{
    width: 100%;
    height: 12vw;
    background-color: #8897FF;
    /*子元素颜色*/
    color: white;
    font-size: 4.8vw;

    /*固定，从上0左0像素开始*/
    position: fixed;
    left: 0;
    top: 0;

    /*确定折叠时div的图层，大的在上面*/
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;

}

/*商家列表样式*/
.wrapper .business{
    width: 100%;
    /*height: 240vw;*/
    margin-top: 12vw;
    margin-bottom: 10vw;
    /*border: red 1px solid;*/
    box-sizing: border-box;
}
.wrapper .business .businessItem{
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #DDDDDD;
    cursor: pointer; /*可选择的*/
    padding: 2.4vw;

    display: flex;
    align-items: center;
}
.wrapper .business .businessItem .businessImage{
    /*若有某个子元素设置了position: absolute,该元素作为其相对定位的基坐标*/
    position: relative;

}
.wrapper .business .businessItem .businessImage img{
    width: 20vw;
    height: 20vw;

}
/*右上角的小数字*/
.wrapper .business .businessItem .businessImage .businessImageQuantity{
    width: 5vw;
    height: 5vw;
    color: white;
    background-color: red;
    font-size: 3.6vw;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    /*绝对定位两种方式*/
    /*第一种 */
    /*position: fixed;*/
    /*left: 20vw;*/
    /*top: 12vw;*/

    /*第二种 对应参照物*/
    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
}
.wrapper .business .businessItem .businessInfo{
    width: 100%;
    box-sizing: border-box;
    margin-left: 3vw;
}
.wrapper .business .businessItem .businessInfo p{
    font-size: 3.2vw;
    font-weight: 550;
    color: #888888;
}
.wrapper .business .businessItem .businessInfo h3{
     font-size: 3.8vw;
    font-weight: 600;
     color: #555555;
}

/*底部样式*/
.wrapper .footer{
    position: fixed;
    /*绝对布局，一直在下面不变*/
    left: 0;
    bottom: 0;

    width: 100%;
    height: 16vw;

    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: white;

    border-top: 1px solid #DDD;
}

.wrapper .footer div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: #858585;
    cursor: pointer;
    /*鼠标移动上去出现的图标*/
}
.wrapper .footer div p{
    font-size: 2.8vw;
    margin-top: 1vw;
}
.wrapper .footer div i{
    font-size: 5vw;
    margin-top: 3vw;
    margin-bottom: 0vw;
}